<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>管理员产品更新硬件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="padding-top: 90px"> 
<script type="text/javascript">
        function load(){//界面刷新时显示所有用户的信息
            $.ajax({
                type:'',
                url:"",
                data:{

                },
                success:function(){

                },
                error:function () {
                    alert("failed")

                }
            });
        }
        function save(){//保存修改
            $.ajax({
                type:'',
                url:"",
                data:{

                },
                success:function(){

                },
                error:function () {
                    alert("failed")
                }
            })
        }	
        function updatehardware(){//更新硬件
            $.ajax({
                type:'',
                url:"",
                data:{

                },
                success:function(){

                },
                error:function () {
                    alert("failed")
                }
            })
        }
        function uploadpic(){//上传图片
            $.ajax({
                type:'',
                url:"",
                data:{

                },
                success:function(){

                },
                error:function () {
                    alert("failed")
                }
            })
        }
    </script>
<div class="container-fluid">
   
    <!-- 上部导航栏 -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #660066;">
        <div class="container-fluid" >
            <div class="navbar-header">
                <a class="navbar-brand" style="margin-left: 20px;color: rgb(255, 255, 255);" href="https://www.baidu.com/">主页</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size: 18px;margin-left: 40px;color: rgb(255, 255, 255);">
                            硬件信息<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu" style="background-color: #660066;">
                            <li><a href="#" style="font-size: 18px;color: rgb(255, 255, 255);">CPU</a></li>
                            <li><a href="#" style="font-size: 18px;color: rgb(255, 255, 255);">显卡</a></li>
                            <li><a href="#" style="font-size: 18px;color: rgb(255, 255, 255);">内存</a></li>
                            <li><a href="#" style="font-size: 18px;color: rgb(255, 255, 255);">硬盘</a></li>
                            <li><a href="#" style="font-size: 18px;color: rgb(255, 255, 255);">笔记本</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="margin-left: 40px;color: rgb(255, 255, 255);">社区交流</a>
            </div>
            <div>
                <form class="navbar-form navbar-left" role="search" style="margin-left: 650px;">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入查找的内容" style="width: 300px;">
                    </div>
                    <a href="https://www.baidu.com/">
                        <img src="search.png" width="35px" height="35px">
                    </a>
                </form>
            </div>
            <div>
                <a href="https://www.baidu.com/"><img src="头像.png" style="width: 37px;margin-top: 8px;"></a>
            </div>
        </div>
    </nav>

    <!-- 左部导航栏 -->
    <div class="col-md-2" style="margin-left:0px;margin-top:40px;">
        <div class="panel-group" id="accordion" >
            <div class="panel panel-default" >
                <div class="panel-heading" style="background-color: purple;">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            <h5><span class="glyphicon glyphicon-th-list" style="color: rgb(231, 237, 238); font-size: 20px;"> 功能页面</span></h5>
                        </a>
                    </h5>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="list-group">
                            <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="#">编辑文章</a>
                            <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="#">更新硬件</a>
                            <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="#">新增硬件</a>
                            <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="#">添加整机</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-10">
        <div class="page-header">
            <h1 style="font-family: 微软雅黑;font-weight: bold;">硬件更新</h1>
        </div>
        <div class="row-fluid">

            <div class="media" style="background-color:#660066;color:black;border-radius: 30px/30px;border:solid 3px purple;">
                <div class="media-left">
                    <img src="显卡.jpg" class="media-object" style="width:200px;height: 200px;">
                    <button onclick="uploadpic()" type="button"  id="open" style="width: 100px;height: 30px;font-size: large;margin-left: 40px;margin-top: 40px">更改图片</button>
                    <input type="file" name="file" id="file" style="display:none" multiple/>
                </div>

                <div class="media-body">
                    <textarea style="font-size: 13px;width:980px;height: 300px">
                        NVIDIA® GeForce RTX 2080
                        RT CORES
                        依托于专用光线追踪硬件，可实现真实的阴影、反射、折射和全局照明。
                        TENSOR CORES
                        人工智能正在推动着有史以来最伟大的技术革命，Turing 将其带入了个人图形计算领域。您可以通过体验 NVIDIA DLSS 给游戏带来的巨大性能提升，来感受 AI 计算的强悍之处。
                        新一代着色技术
                        可变速率着色集中处理细节丰富的区域，从而提高性能。Mesh Shader 的高级几何处理能力支持每个场景中更多的对象，因而能够渲染更复杂的环境。
                        并发处理
                        同步浮点和整数处理使 Turing GPU 能够更有效地处理当今游戏大作更为繁重的运算任务。
                    </textarea>
                </div>
            </div>

            <svg  width="100%" height="100%">
                <polyline points="170,120 170,60 620,60" style="fill:none;stroke:#660066;stroke-width:3" />
                <polyline points="450,120 450,60" style="fill:none;stroke:#660066;stroke-width:3" />
                <polyline points="790,120 790,60 620,60" style="fill:none;stroke:#660066;stroke-width:3" />
                <polyline points="1070,120 1070,60 620,60" style="fill:none;stroke:#660066;stroke-width:3" />
                <polyline points="610,60 610,0" style="fill:none;stroke:#660066;stroke-width:3" />
            </svg>
            <div class="row-fluid">
                <div class="col-md-3">
                    <div class="thumbnail" style="background-color:#660066;color: white;border-radius: 30px/30px;">
                        <img alt="300x200" src="cpu.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
                        <h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">CPU</h3>
                        <div>
                            <input type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="thumbnail" style="background-color:#660066;color: white;border-radius: 30px/30px;">
                        <img alt="300x200" src="显卡.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
                        <h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">显卡</h3>
                        <div>
                            <input type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="thumbnail" style="background-color:#660066;color: white;border-radius: 30px/30px;">
                        <img alt="300x200" src="内存.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
                        <h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">内存</h3>
                        <div>
                            <input type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="thumbnail" style="background-color:#660066;color: white;border-radius: 30px/30px;">
                        <img alt="300x200" src="硬盘.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
                        <h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">硬盘</h3>
                        <div>
                            <input type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-md-4">
                </div>
                <div class="col-md-2">
                    <button onclick="save()" type="button" class="btn btn-default" style="width: 150px;height: 50px;font-size: large">保存更改</button>
                </div>
                <div class="col-md-6">
                    <button onclick="updatehardware()" type="button" class="btn btn-default" style="width: 150px;height: 50px;font-size: large">新增硬件</button>
                </div>

            </div>
        </div>
    </div>

</body>
<script>
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        document.getElementById('open').addEventListener('click',function() {
            document.getElementById('file').click();
        }, false);
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
</script>
</html>